<template>
	<view class="box">
		<view class="top">
			<!-- 渲染状态切换 -->
			<view class="change">
				<!-- 任务待领取 -->
				<view :class="index == 1 ? 'active change-item':'change-item'" @tap="index=1">
					<uni-badge class="uni-badge-left-margin" :text="dataList1.length" absolute="rightTop" :offset="[-3, 15]"
						size="small">
						<view class=""><text class="box-text">待领取</text></view>
					</uni-badge>
				</view>
				<!-- 任务待执行 -->
				<view :class="index == 2 ? 'active change-item':'change-item'" @tap="index=2">
					<uni-badge class="uni-badge-left-margin" :text="dataList2.length" absolute="rightTop" :offset="[-3, 15]"
						size="small">
						<view class=""><text class="box-text">待执行</text></view>
					</uni-badge>
				</view>
				<!-- 任务执行中 -->
				<view :class="index == 3 ? 'active change-item':'change-item'" @tap="index=3">
					<uni-badge class="uni-badge-left-margin" :text="dataList3.length" absolute="rightTop" :offset="[-3, 15]"
						size="small">
						<view class=""><text class="box-text">执行中</text></view>
					</uni-badge>
				</view>
				<!-- 任务已完成 -->
				<view :class="index == 4 ? 'active change-item':'change-item'" @tap="index=4">
					<uni-badge class="uni-badge-left-margin" :text="dataList4.length" absolute="rightTop" :offset="[-3, 15]"
						size="small">
						<view class=""><text class="box-text">已完成</text></view>
					</uni-badge>
				</view>
			</view>
			<!-- 搜索框 -->
			<view class="select">
				<uni-search-bar placeholder="搜索" bgColor="#EEEEEE" @confirm="search" />
			</view>
		</view>
		<!-- 占位 -->
		<view class="z">
			
		</view>
		<!-- 任务卡片 -->
		<!-- 任务领取 -->
		<view class="content" v-show="index == 1">
			<Item v-for="(item,i) of dataList1" :key="i" :data='item' @click="dialogToggle('success',item._id)"></Item>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="稍后执行" confirmText="前往执行" title="通知" content="任务领取成功!"
				@confirm="postinspection" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<!-- 任务待执行 -->
		<view class="content" v-show="index == 2">
			<Item v-for="(item,i) of dataList2" :key="i" :data='item' @click="task(item._id)"></Item>
		</view>
		<!-- 任务进行中 -->
		<view class="content" v-show="index == 3">
			<Item v-for="(item,i) of dataList3" :key="i" :data='item' @click="task(item._id)"></Item>
		</view>
		<!-- 任务已完成 -->
		<view class="content" v-show="index == 4">
			<Item v-for="(item,i) of dataList4" :key="i" :data='item' @click="done(item._id)"></Item>
		</view>
	</view>
</template>

<script>
	//引入自定义组件
	import Item from './item/item.vue'
	import {request} from '../../../unit/request.js'
	export default {
		// 注册组件
		components: {
			Item
		},
		data() {
			return {
				//任务领取弹窗数据
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				// 切换渲染状态
				index: 1,
				// 任务待领取
				dataList1: [],
				// 任务待执行
				dataList2: [],
				// 任务执行中
				dataList3: [],
				// 任务已完成
				dataList4: []
			}
		},
		mounted() {
		this.getdatalist()
		},
		onLoad(option) {
			if(option.index){
				this.index = option.index
			}
		},
		methods: {
			// 获取待领取列表
			async getinspectionList(){
				let res = await request({
					url:'http://42.192.15.126:3000/wang/inspectionList',
				})
				this.dataList1 = res.data
			},
			//获取待执行列表
			async getexecutedList(){
				let res = await request({
					url:'http://42.192.15.126:3000/wang/executed',
				})
				this.dataList2 = res.data
				this.dataList3 = res.data
			},
			//获取已完成
			async getcompletedList(){
				let res = await request({
					url:'http://42.192.15.126:3000/wang/completed',
				})
				this.dataList4 = res.data
			},
			//获取所有数据
			getdatalist(){
				this.getinspectionList()
				this.getexecutedList()
				this.getcompletedList()
			},
			//领取任务
			async postinspection(){

				this.index = 2
			},
			//搜索框
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			//打开领取弹窗
			async dialogToggle(type,id) {
				this.msgType = type
				this.$refs.alertDialog.open()
				let res = await request({
					method:"POST",
					url:`http://42.192.15.126:3000/wang/inspectionList?id=${id}`,
				})
				if(res.code == 200){
					this.getdatalist()
				}
			},
			//任务执行跳转详情
			task(id){
				uni.navigateTo({
					url:`/pages/patrol-management/task-details/task-details?id=${id}`
				})
			},
			//任务完成跳转详情
			done(id){
				uni.navigateTo({
					url:`/pages/patrol-management/done-detalis/done-detalis?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	html,
	body,
	#app {
		height: 100%;
	}

	.box {
		background-color: rgb(244, 246, 249);
		height: 100%;
		.top{
			background-color: rgb(244, 246, 249);
			position: fixed;
			top: 40px;
			width: 100%;
			//切换栏
			.change {
				margin-top: 10px;
				z-index: 2;
				background-color: white;
				display: flex;
				height: 50px;
				width: 100%;
				align-items: center;
			
				.change-item {
					flex: 1;
					height: 50px;
					line-height: 50px;
					text-align: center;
					color: rgb(179, 180, 199);
					font-weight: 700;
					box-sizing: border-box;
				}
			}
			
			//搜索
			.select {

				background-color: rgb(244, 246, 249);
			}
		}
		// 占位
		.z{
			height: 100px;
		}
		//内容
		.content {
			margin-top: -8px;
		}


	}
//占满全屏
	uni-page-body {
		height: 100%;
	}

	// 选中样式
	.active {
		border-bottom: 3px solid rgb(78, 122, 255);
	}
</style>
